<template>
  <el-dialog v-model="isShowForm"  width="550px" draggable class="formclass">
    <el-form
        label-width="100px"
        :model="form"
        style="max-width: 460px"
        ref="FORM"
    >
      <el-form-item label="选择出库时间">
        <el-date-picker type="date" v-model="form.outTime" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="选择运输公司">
        <el-select v-model="company" placeholder="请选择运输公司">
          <el-option
              v-for="item in companys"
              :key="item.company"
              :label="item.label"
              :value="item.company">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择分站地址">
        <el-select v-model="inboundRoomId" placeholder="请选择分站">
          <el-option
              v-for="item in boundOptions"
              :key="item.warehouseName"
              :label="item.warehouseName"
              :value="item.warehouseName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitGoods()">提交</el-button>
        <el-button @click="cancelExpert">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>



  <div style="text-align:left;padding: 10px 0" >
    <el-button class="ml-5"  type="primary" @click="autoCreateGoodsTask()">一键生成任务单</el-button>
  </div>
  <el-table :data="tableData" empty-text="暂无可处理订单" border stripe>
    <el-table-column prop="oid" label="订单号" width="270">
    </el-table-column>
    <el-table-column prop="username" label="客户姓名" width="90">
    </el-table-column>
    <el-table-column prop="loc" label="投递地址" width="220">
    </el-table-column>
    <el-table-column prop="shoppingName" label="商品名称">
    </el-table-column>
    <el-table-column prop="shoppingNum" label="商品数量">
    </el-table-column>
    <el-table-column prop="type" label="任务类型" :formatter="getType" width="100">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="showForm(scope.row)"
        >生成任务单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="padding: 10px 0">
    <el-pagination
        background
        :page-size=pageSize
        :total=totalSize
        layout="total, prev, pager, next"
        @current-change="pageChange"
        :current-page=pageNow
    />
  </div>
</template>

<script>
import axios from "axios";
import Header from "@/components/Header";
import Main from "@/components/Main";
import Aside from "@/components/Aside.vue";

export default {
  name: 'createTask',
  data() {
    return {
      inboundRoomId:null,
      isShowForm:false,
      tableData: [],
      sideWidth: 200,
      pageSize: 8,
      totalSize: 100,
      pageNow: 0,
      typeOptions: [
        {
          type: 0,
          label: '普通订单'
        },
        {
          type: 1,
          label: '退货单'
        },
        {
          type: 2,
          label: '换货单'
        },
        {
          type: 3,
          label: '缺货单'
        },
        {
          type: null,
          label: ''
        }],
      type: null,
      boundOptions:[],
      bound:null,
      companys:[
        {
          company: '申通快递',
          label: '申通快递'
        },
        {
          company: '顺丰快递',
          label: '顺丰快递'
        },
        {
          company: '中通快递',
          label: '中通快递'
        },
        {
          company: '京东快递',
          label: '京东快递'
        },
        {
          company: '邦德快递',
          label: '邦德快递'
        },
        {
          company:null,
          label: ''
        }
      ],
      company:null,
      form:{
        outTime:'',
        outNumber:null,
      },
      oid:'',

    }
  },
  methods: {
    addsuccess(orderId) {
      this.$notify({
        title: '任务单创建成功',
        dangerouslyUseHTMLString: true,
        message: '&nbsp;'+'<strong>' +orderId+'</strong>'+'&nbsp;'+"任务单已创建成功",
        type: 'success'
      });
    },
    getBoundOptions(){
      axios.post("http://localhost:1080/warehouse/page",{
        warehouseLevel:2
      }).then(res=>{
        res=res.data
        if(res.code=='200'){
          this.boundOptions=res.data.rowData
        }else {

        }
      })
    },
    getType(row, column) {
      if (row.type === 0) {
        return '普通订单'
      } else if (row.type === 1) {
        return '退货单'
      } else if (row.type === 2) {
        return '换货单'
      } else if (row.type === 3) {
        return '缺货单'
      }
    },
    showForm(row){
      this.oid = row.oid
      this.isShowForm=true
    },
    onSubmitGoods(){
      console.log(this.form.outTime)
      axios.post("http://localhost:1030/goodsTransferOrder/createGoodsTransferOrder",{
        oid:this.oid,
        inboundRoomId:this.inboundRoomId,
        outboundTime:this.form.outTime,
        company:this.company
      }).then(res=>{
        this.loadPost();
        this.clear();
        this.addsuccess(this.oid)
        this.isShowForm = false;
      })
    },
    // onSubmitDistribution(){
    //   axios.post("http://localhost:1030/distributionTaskOrder/autoCreateDistributionTaskOrder",{
    //     oid:this.oid
    //   }).then(res=>{
    //     this.loadPost();
    //     this.isShowForm = false;
    //   })
    // },
    cancelExpert(){
      this.clear()
      this.isShowForm = false; //关闭对话框
    },
    clear() {
      this.form = {
        outTime:'',
        outNumber:'',
      }
    },
    // autoCreateDistributionTask() {
    //   axios.post("http://localhost:1030/distributionTaskOrder/autoCreateDistributionTaskOrder", {
    //   }).then(res => {
    //     this.loadPost()
    //   })
    // },
    autoCreateGoodsTask(){
      axios.post("http://localhost:1030/goodsTransferOrder/autoCreateGoodsTransferOrder",{
      }).then(res=>{
        this.loadPost()
      })
    },
    pageChange(val) {
      console.log(val)
      this.pageNow = val
      axios.post("http://localhost:1030/orderInquire/findUndistributedOrder", {
        pageNow: (val - 1) * 8,
        pageSize: 8
      }).then(res => {
        res = res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })
    },
    loadPost() {
      axios.post("http://localhost:1030/orderInquire/findUndistributedOrder", {
        pageNow: this.pageNow,
        pageSize: this.pageSize
      }).then(res => {
        res = res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    }
  },
  beforeMount() {
    this.loadPost();
    this.getBoundOptions()
  },
  components: {
    Aside,
    Header,
    Main,

  }
}
</script>


<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.formclass{
  border-radius: 20px;
}
</style>